<template>
  <div class="app-container">
    <el-container>
      <el-header class="header">
        <div class="logo">
          <el-icon size="24"><Magic /></el-icon>
          <span>AI多模型智能助手</span>
        </div>
        <div class="user-info">
          <el-button type="text" @click="showAbout">
            <el-icon><InfoFilled /></el-icon>
            关于
          </el-button>
        </div>
      </el-header>
      
      <el-container>
        <el-aside width="250px" class="sidebar">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="/">
              <el-icon><ChatDotRound /></el-icon>
              <span>主页</span>
            </el-menu-item>
            <el-menu-item index="/chat">
              <el-icon><ChatDotRound /></el-icon>
              <span>智能对话</span>
            </el-menu-item>
            <el-menu-item index="/tools">
              <el-icon><Tools /></el-icon>
              <span>工具集</span>
            </el-menu-item>
            <el-menu-item index="/history">
              <el-icon><Clock /></el-icon>
              <span>对话历史</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import type { ElMessageBoxOptions } from 'element-plus'

const route = useRoute()
const router = useRouter()

const activeMenu = computed(() => route.path)

const handleMenuSelect = (index: string) => {
  router.push(index)
}

const showAbout = () => {
  const options: ElMessageBoxOptions = {
    title: '关于AI多模型智能助手',
    message: `
      <div style="text-align: left;">
        <h3>AI多模型智能助手 v1.0.0</h3>
        <p>基于 Spring AI 框架和智谱AI大语言模型构建的智能对话应用</p>
        <h4>主要功能：</h4>
        <ul>
          <li>智能对话：支持普通对话和流式对话</li>
          <li>文件操作：读取、创建、修改文件和文件夹</li>
          <li>网页获取：获取指定URL的网页内容</li>
          <li>日期时间：获取当前时间、设置闹钟提醒</li>
          <li>工具集：集成多种实用AI工具</li>
          <li>对话历史：管理和查看历史对话记录</li>
        </ul>
        <h4>技术栈：</h4>
        <ul>
          <li>前端：Vue 3 + TypeScript + Vite + Element Plus</li>
          <li>后端：Spring Boot 3.5.7 + Spring AI 1.0.3</li>
          <li>AI模型：智谱AI (ZhiPu AI)</li>
        </ul>
        <p style="margin-top: 10px; color: #666;">
          © 2025 AiMultiModel Project
        </p>
      </div>
    `,
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确定'
  }
  
  ElMessageBox.alert('', options)
}
</script>

<style scoped>
.app-container {
  height: 100vh;
  background-color: #f5f7fa;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.logo .el-icon {
  margin-right: 10px;
}

.user-info {
  display: flex;
  gap: 10px;
}

.sidebar {
  background-color: white;
  border-right: 1px solid #e4e7ed;
}

.sidebar-menu {
  border-right: none;
}

.main-content {
  background-color: white;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>